<template>
	<view style="width: 100%; height: 100%;">
		<view v-if="info != null" class="chrs" :class="info.faction == 1 ? 'bg-bl' : 'bg-lm'">
			<image v-if="info.faction == 1" src="/static/bl.png" mode="" class="sy"></image>
			<image v-else src="/static/lm.png" mode="" class="sy"></image>
			<image :src="info.class_icon" :style="{borderColor: info.class_color}" class="class-icon"></image>
			<view class="mid">
				<view class="title-n">
					<view class="t">
						{{info.class_name}}
					</view>
					<view class="t" >
						{{info.name + ' - ' + info.server_name}}
					</view>
				</view>
				<view class="mid-sqec">
					<image class="role" :src="'/static/' + info.role +'_icon.png'" mode=""></image>
					<image class="sqec-icon" :src="info.sqec_icon" mode=""></image>
					<view class="sqec-name">
						{{info.sqec_name}}
					</view>
					<view class="sqec-name">
						({{info.item_level}})
					</view>
				</view>
			</view>
			<view class="yq-btn">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ask-player-cell",
		props: {
			info: {
				type: Object,
				default: null
			},
			scale: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
	.chrs {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		border-radius: 2px;
		/* background-color: wheat; */
		position: relative;
	}
	
	.bg-bl {
		background:  linear-gradient(to right, #5b5134, #43090a);
	}
	
	.bg-lm {
		background:  linear-gradient(to right, #5b5134, #121d32);
	}
	
	.sy {
		position: absolute;
		right: 10px;
		top: 0;
		height: 100%;
		width: 80px;
		z-index: 0;
	}
	
	.class-icon {
		width: 30px;
		height: 30px;
		border: 1px wheat solid;
		border-radius: 3px;
		margin-left: 5px;
		box-sizing: border-box;
		z-index: 2;
	}
	
	.title-n {
		display: flex;
		align-items: center;
		font-size: 12px;
		/* margin-top: 3px; */
	}
	
	.mid {
		display: flex;
		flex-direction: column;
		margin-left: 5px;
		z-index: 2;
		width: 1px;
		flex: 1;
	}
	
	.t {
		color: wheat;
		text-shadow: 1px 1px 1px black;
		margin-right: 10px;
	}
	
	.mid-sqec {
		display: flex;
		align-items: center;
		margin-top: -6px;
	}
	
	.role {
		width: 15px;
		height: 15px;
		margin-right: 5px;
		border: 1px wheat solid;
		border-radius: 100%;
		box-sizing: border-box;
	}
	
	.sqec-icon {
		width: 15px;
		height: 15px;
		margin-right: 5px;
		border-radius: 100%;
		border: 1px wheat solid;
		box-sizing: border-box;
	}
	
	.sqec-name {
		font-size: 12px;
		font-weight: bold;
		text-shadow: 1px 1px 1px black;
		color: wheat;
	}
	
	.yq-btn {
		margin-right: 13px;
		display: flex;
		align-items: center;
		z-index: 20;
	}
</style>